<template>
  <div class="subject-container">
    <div class="app-container">
      <el-card shadow="always" :body-style="{ padding: '0px' }">
        <el-row type="flex" justify="space-between" class="action-bar">
          <el-form :inline="true">
            <el-form-item size="small">
              <el-input
                v-model="query.username"
                clearable
                placeholder="管理员账号"
                @clear="loadUserList"
              />
            </el-form-item>
            <el-form-item size="small">
              <el-input
                v-model="query.email"
                placeholder="管理员邮箱"
                clearable
                @clear="loadUserList"
              />
            </el-form-item>
            <el-form-item size="small">
              <el-select
                v-model="query.status"
                placeholder="选择显示状态"
                clearable
                @clear="loadUserList"
              >
                <el-option label="全部" value="" />
                <el-option label="显示" value="1" />
                <el-option label="隐藏" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item size="small">
              <el-button
                type="primary"
                plain
                @click="loadUserList"
              >搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
          <el-button
            type="primary"
            plain
            @click="isEditUserShow = true"
          >新增用户</el-button>
        </el-row>
        <div class="table-wrap">
          <el-table :data="userList" style="width: 100%" border>
            <el-table-column
              prop="id"
              label="管理员id"
              width="80"
              align="center"
            />
            <el-table-column prop="username" label="管理员姓名" align="center" />
            <el-table-column prop="email" label="管理员邮箱" align="center">
              <template v-slot="{ row }">
                <el-link :href="`mailto:${row.email}`">{{ row.email }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
              <template v-slot="{ row }">
                <el-link :href="`tel:${row.phone}`">{{ row.phone }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="管理员头像" align="center">
              <template v-slot="{ row }">
                <el-avatar
                  :size="50"
                  :src="`http://122.51.249.55:7005/${row.avatar}`"
                >
                  <img
                    src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                  >
                </el-avatar>
              </template>
            </el-table-column>
            <el-table-column label="管理员角色" align="center" width="120">
              <template v-slot="{ row }">
                <el-tag
                  v-for="item in row.roles_names"
                  :key="item"
                  :style="{ margin: '4px' }"
                  type="success"
                  size="32"
                >{{ item }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column
              prop="created_at"
              label="添加时间"
              width="200"
              align="center"
            />
            <el-table-column label="状态" align="center">
              <template v-slot="{ row }">
                <el-switch
                  :active-value="1"
                  :inactive-value="2"
                  :value="row.status"
                  active-color="#409eff"
                  @change="toggleUserStatus(row, $event)"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template v-slot="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  size="small"
                  circle
                  @click="editUser(row.id)"
                />
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                  circle
                  @click="delRow(row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            :current-page.sync="query.page"
            :page-sizes="[5, 6, 8, 10]"
            :page-size="query.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          >
            >
          </el-pagination>
        </div>
      </el-card>
    </div>
    <edit-user
      ref="editUser"
      :dialog-visible.sync="isEditUserShow"
      @update-list="loadUserList"
    />
  </div>
</template>
<script>
import { fetchUserList, changeUserStatus, deleteUserData } from '@/api/user_c'

import EditUser from './components/edit-user.vue'
export default {
  name: 'User',
  components: { EditUser },
  props: {},
  data() {
    return {
      userList: [],
      query: {
        page: 1,
        limit: 10
      },
      total: 0,
      userStatus: '',
      isEditUserShow: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.loadUserList()
  },
  mounted() {},
  methods: {
    async loadUserList() {
      const resp = await fetchUserList(this.query)
      this.userList = resp.data.list
      this.total = resp.data.total
    },
    async toggleUserStatus(row, status) {
      const resp = await changeUserStatus(row.id, status)
      if (!resp.success) {
        return this.$message.error(resp.msg)
      }
      this.$message.success('更改成功')
      row.status = status
    },

    // 当前每页显示数量改变时触发
    sizeChange(val) {
      this.query.limit = val
      this.loadUserList()
    },
    // 当前页码改变时触发
    currentChange(val) {
      this.query.page = val
      this.loadUserList()
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },

    editUser(id) {
      this.$refs.editUser.loadUserData(id)
      this.isEditUserShow = true
    },

    async delRow(id) {
      await this.$confirm('确定要删除该用户吗？', '删除用户')
      await deleteUserData(id)
      this.$message.success('删除成功')
      if (this.query.page !== 1 && this.userList.length === 1) {
        this.query.page--
      }
      this.loadUserList()
    },
    reset() {
      this.query = {
        page: 1,
        limit: 10
      }
      this.loadUserList()
    }
  }
}
</script>
<style lang="scss" scoped>
.action-bar {
  height: 72px;
  padding: 16px;
}
.table-wrap {
  padding: 0 16px;
}
.pagination-container {
  margin: 0;
  background: #fff;
  padding: 10px 16px 32px;
  .el-pagination {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>
